<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layuiAdmin 后台管理员</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="__STATIC__/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="__STATIC__/layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-form layui-card-header layuiadmin-card-header-auto">


        <div class="layui-inline">
          <label class="layui-form-label">域名</label>
          <div class="layui-input-block">
            <select name="domain">
              <option value="">All</option>
              {volist name="url" id="v"}
              {if condition="$v.domain eq $urlDate"} //做比较，用获取到的值比较第二个值
              <option value="{$v.domain}" selected>{$v.domain}</option>
              {else /}
              <option value="{$v.domain}">{$v.domain} </option>
              {/if}
              {/volist}
            </select>
          </div>
        </div>

        <div class="layui-inline">
          <label class="layui-form-label">时间</label>
          <div class="layui-input-block" style="width: 300px;">
            <input type="text" name="time" class="layui-input" id="test10" autocomplete="off" placeholder=" Y-M-d H:i:s ">
          </div>
        </div>


        <div class="layui-inline">
          <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-user-back-search">
            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
          </button>
        </div>
        <div class="layui-inline" id="btn">
          <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-event="btn" lay-filter="LAY-user-back-arraydel">
            <i class="layui-icon layui-icon-delete layuiadmin-button-btn" title="批量删除"></i>批量删除
          </button>
        </div>
      </div>
    </div>

    <div class="layui-card-body">

      <table id="LAY-user-back-manage" lay-filter="LAY-user-back-manage"></table>


      <script type="text/html" id="rolesTitle">
        {{# layui.each(d.roles,function(index,roles_title){}}
        {{ roles_title.title }}
        {{# }); }}
      </script>

      <!-- <script type="text/html" id="percent">
        {{#
        var fn = function(lock,height){
          var m =  ((lock - height)*100)/ height;
          return m.toFixed(2);
        };
        }}

        <h3>{{ fn(d.ym_lock,d.ym_height) }}%</h3>
      </script> -->

      <script type="text/html" id="buttonTpl">

        {{#  if(d.v_type == 1){ }}
        <button class="layui-btn layui-btn-xs layui-btn-normal">长按复制</button>
        {{#  }else if(d.v_type == 2){ }}
        <button class="layui-btn layui-btn-xs">点击复制</button>
        {{#  } else { }}
        <button class="layui-btn layui-btn-primary layui-btn-xs">未审核</button>
        {{#  } }}



      </script>

      <script type="text/html" id="table-useradmin-admin">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
      </script>

    </div>
  </div>
</div>

<script src="__STATIC__/layuiadmin/layui/layui.js"></script>
<script>
  layui.config({
    base: '__STATIC__/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'table','laydate'], function(){
    var $ = layui.$
            ,form = layui.form
            ,laydate = layui.laydate
            ,table = layui.table;
        // 获取当前时间日期,根据日期命名导出的excel表
         var time=new Date();
         var date = time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate() + ' ' + time.getHours() 
         + ':' + time.getMinutes() + ':' + time.getSeconds(); 
        //  console.log(date);


    //日期时间范围
    laydate.render({
      elem: '#test10'
      ,type: 'datetime'
      ,range: true
    });

    table.render({
      elem: '#LAY-user-back-manage'
      ,url:'customList'
      ,where: { domain: "{$urlDate}"  }
      // ,method:"post"
      ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
      ,title: date+'__访客实时统计'
      ,limit: 10
      ,limits: [2,5,1000000]  //一页选择显示3,5或10条数据
      ,cols: [[
        { title:'ID', fixed: 'left', type:'numbers'},
        {field:'id',type:'checkbox'}
        ,{field:'url', title:'当前链接', width:300,}
        ,{field:'key_word', title:'搜索词', width:100, }
        ,{field:'show_wx', title:'展示微信', width:200, }
        ,{field:'source_type', title:'搜索来源', width:120,sort:true }
        ,{field:'time', title:'阅读时间', width:100,sort:true}
        // ,{field:'province', title:'阅读占比', width:80,toolbar: '#percent', }
        // ,{field:'v_type', title:'页面操作', width:100,toolbar: '#buttonTpl', }
        ,{field:'province', title:'省级', width:80, }
        ,{field:'city', title:'市级', width:80, }
        ,{field:'equipment', title:'设备', width:100,}
        ,{field:'ip', title:'IP', width:200, }
        ,{field:'create_time', title:'创建时间', width:150}
        ,{field:'ref', title:'来源链接', width:300}
        ,{fixed: 'right', title:'操作', toolbar: '#table-useradmin-admin', width:100}
      ]]
      ,page: true
      



    });

    //监听搜索
    form.on('submit(LAY-user-back-search)', function(data){
      var field = data.field;
      console.log(field);
      //执行重载
      table.reload('LAY-user-back-manage', {
        where: field
      });
    });



    //事件
    var active = {
      add: function(){
        layer.open({
          type: 2
          ,title: '添加管理员'
          ,content: 'create'
          ,area: ['450px', '700px']
          ,fixed: false //不固定
          ,maxmin: true
          ,btn: ['确定', '取消']
          ,yes: function(index, layero){
            var iframeWindow = window['layui-layer-iframe'+ index]
                    ,submitID = 'LAY-user-create-submit'
                    ,submit = layero.find('iframe').contents().find('#'+ submitID);

            //监听提交
            iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
              var field = data.field; //获取提交的字段
              console.log(field);
              //提交 Ajax 成功后，静态更新表格中的数据
              $.ajax({
                type:"POST",
                url:"save",
                dataType:"json",
                data:field,
                success:function (res) {
                  console.log(res);
                  if (res['code']==1){
                    layer.msg(res['msg'],{icon: 1,time: 1000 },function () {
                      table.reload('LAY-user-back-manage');
                      // layer.close(index1); //关闭弹层
                      layer.close(index); //关闭弹层
                    });
                  }else {
                    layer.msg(res['msg'],{icon: 2,time: 1000 },function () {
                    });
                  }
                }
              });

            });

            submit.trigger('click');
          }
        });
      }
    };
    $('.layui-btn.layuiadmin-btn-admin').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });


        // 批量删除
   form.on('submit(LAY-user-back-arraydel)', function(){
      var index = parent.layer.getFrameIndex(window.name);
      var checkStatus = table.checkStatus('LAY-user-back-manage');
      console.log(checkStatus.data)//选中行的数据
      var items = checkStatus.data;
      if (items == "" || items == undefined || items == null) {
         layer.msg('请选择需要批量删除的数据！',{icon: 2,time: 2000 },function () {
                  layer.close(index);
          });
         return false;
      }
      var arr=[];     //存储/取出 需要删除得记录id
      for (var i = 0; i < items.length; i++) {
        // console.log(i)
        arr.push(items[i]['id']);
      }
      // 输出需要删除的记录id
      console.log(arr)
      // 提交数据到后台进行删除，php代码。。。。
      layer.confirm('确认批量删除访客信息吗？删除后将无法返回！', function(index){
        $.ajax({
            type: "POST",    //根据post请求批量删除数据
            url:'customDelete',
            data:{'id':arr},
            dataType:"json",
            success:function (res) {
              console.log(res);
              if (res['code']==1){
                layer.msg(res['msg'],{icon: 1,time: 1000 },function () {
                  layer.close(index);
                  table.reload('LAY-user-back-manage');
                });
              }
            }
          });
      });
     
    });




    //监听行工具事件
    table.on('tool(LAY-user-back-manage)', function(obj){
      var data = obj.data;
      // console.log(data.id);
      if(obj.event === 'del'){
        layer.confirm('确认删除该条信息吗？删除后将无法返回！', function(index){
          $.ajax({
            type: "GET",
            url:'customDelete',
            data:{'id':data.id},
            dataType:"json",
            success:function (res) {
              // console.log(res);
              if (res['code']==1){
                layer.msg(res['msg'],{icon: 1,time: 1000 },function () {
                  obj.del();
                  layer.close(index);
                  table.reload('LAY-user-back-manage');
                });
              }
            }
          });


        });
      } else if(obj.event === 'edit'){
        //iframe层-父子操作
        // console.log(data);
        layer.open({
          type: 2,
          area: ['450px', '700px'],
          fixed: false, //不固定
          maxmin: true,
          content: 'edit?id='+data.id,
          btn: ['确定', '取消'],
          yes: function(index, layero){
            var iframeWindow = window['layui-layer-iframe'+ index]
                    ,submit = layero.find('iframe').contents().find("#LAY-user-back-submit");
            //监听提交
            iframeWindow.layui.form.on('submit(LAY-user-back-submit)', function(data){
              var field = data.field; //获取提交的字段

              //提交 Ajax 成功后，静态更新表格中的数据
              //loading层
              var index1 = layer.load(1, {
                shade: [0.1,'#fff'], //0.1透明度的白色背景
                time: 1000
              });
              $.ajax({
                url:'update',
                type:"POST",
                data:field,
                dataType:"json",
                success:function (res) {
                  console.log(res['code']);
                  if (res['code'] == 1){
                    layer.msg(res['msg'],{icon: 1,time: 1000 },function () {
                      table.reload('LAY-user-back-manage');
                      layer.close(index1); //关闭弹层
                      layer.close(index); //关闭弹层
                    });
                  }
                }
              });
            });
            submit.trigger('click');
          },
          btn2: function(){
            layer.closeAll();
          }
        });
      }
    });


  });
</script>
</body>
</html>

